<template>
    <div class="view-modal-wrapper">
        <el-dialog :model-value="props.value" :title="dialog.title" :width="dialog.width" destroy-on-close>
            <el-form label-width="110px" disabled>
                <el-form-item
                    label="绑定类型："
                    :style="{ width: dialog.detail?.bindType === 'attribute' ? '' : '100%' }"
                    >{{ BindType[dialog.detail?.bindType] }}</el-form-item
                >
                <el-form-item label="属性操作类型：" v-if="dialog.detail?.bindType === 'attribute'">{{
                    Method[dialog.detail?.method]
                }}</el-form-item>
                <el-form-item label="模型名称：">
                    <el-link type="primary" @click="onGopage(dialog.detail)">{{ dialog.detail?.modelName }}</el-link>
                </el-form-item>
                <el-form-item :label="BindType[dialog.detail?.bindType] + '名称：'">
                    <el-link type="primary" @click="onViewItem(dialog.detail)">{{ dialog.detail?.bindName }}</el-link>
                </el-form-item>
                <el-form-item label="对应命令：">{{ dialog.detail?.commandDescription }}</el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { modelService } from '@great/services';
import { reactive } from 'vue';
import { showPopupBox, type PopupBoxProps } from '@great/utils';
import { checkPermi } from '@/utils/ruoyi';
import { useRouter } from 'vue-router';
import AttributeFormModal from '@/pages/model/thing/components/detail/thingModel/components/AttributeFormModal.vue';
import EventFormModal from '@/pages/model/thing/components/detail/thingModel/components/EventFormModal.vue';
import ActionFormModal from '@/pages/model/thing/components/detail/thingModel/components/ActionFormModal.vue';

const router = useRouter();
interface IProps extends PopupBoxProps {
    row?: Record<string, any>;
    callBack?: () => Promise<void>;
}
const props = defineProps<IProps>();

enum BindType {
    attribute = '属性',
    action = '行为',
    event = '事件'
}
enum Method {
    read = '读',
    write = '写'
}
interface Dialog {
    title: string;
    width: number;
    detail?: Record<string, any>;
}
const dialog = reactive<Dialog>({
    title: '查看对应关系',
    width: 900,
    detail: undefined
});
// 查看模型
const onGopage = (row: any) => {
    if (checkPermi(['model:thing:detail'])) {
        closeDialog();
        router.push({
            name: 'model-thing-detail',
            params: {
                id: row?.modelId
            }
        });
    }
};
// 查看属性/事件/行为
const onViewItem = async (row: any) => {
    if (row.bindType === 'attribute') {
        let requests: Array<any> = [];
        let detailRequest = await modelService.attribute.getDetail(row.bindId);
        requests.push(detailRequest);
        let attributeRequest = modelService.attribute.getTypeList();
        requests.push(attributeRequest);
        await Promise.all(requests);
        let detail = await detailRequest;
        let attribute = await attributeRequest;
        // 打开弹框
        showPopupBox(AttributeFormModal, {
            readOnly: true,
            detail: detail.data,
            attributeTypeList: attribute.data
        });
    } else if (row.bindType === 'event') {
        let requests: Array<any> = [];
        let detailRequest = await modelService.event.getDetail(row.bindId);
        requests.push(detailRequest);
        let attributeRequest = modelService.attribute.getTypeList();
        requests.push(attributeRequest);
        await Promise.all(requests);
        let detail = await detailRequest;
        let attribute = await attributeRequest;
        // 打开弹框
        showPopupBox(EventFormModal, {
            readOnly: true,
            detail: detail.data,
            modelDetail: {
                objectName: detail.data.objectName
            },
            attributeTypeList: attribute.data
        });
    } else if (row.bindType === 'action') {
        let requests: Array<any> = [];
        let detailRequest = await modelService.action.getDetail(row.bindId);
        requests.push(detailRequest);
        let attributeRequest = modelService.attribute.getTypeList();
        requests.push(attributeRequest);
        await Promise.all(requests);
        let detail = await detailRequest;
        let attribute = await attributeRequest;
        // 打开弹框
        showPopupBox(ActionFormModal, {
            readOnly: true,
            detail: detail.data,
            modelDetail: {
                objectName: detail.data.objectName
            },
            attributeTypeList: attribute.data
        });
    }
};
//关闭弹框
const closeDialog = () => {
    props.close();
    props.callBack?.();
};
// 打开弹框
const openDialog = () => {
    dialog.detail = JSON.parse(JSON.stringify(props.row));
};

const init = () => {
    openDialog();
};
init();
</script>
<style scoped lang="scss">
.view-modal-wrapper {
    .el-form {
        display: flex;
        flex-wrap: wrap;
        .el-form-item {
            width: calc(100% / 2);
        }
    }
}
</style>
